<!DOCTYPE html>  
<html lang="en">  
<head>   
<meta charset="UTF-8">   
<title></title>
<style type="text/css" media="screen">
  body{margin:0;padding:0;}
  #canvas{border:2px solid red;position: absolute;left:80px;top:80px;}
</style>
    <script type="text/javascript" src="./js/controller.js"></script>
</head>  
<body>
	<canvas id="canvas" width="400" height="400" style="">
	      <p>写在这里面的内容将展示给不兼容canvas的浏览器</p>
	</canvas>
  <canvas id="coordinateCanvas" width="1000" height="1000">
        <p>写在这里面的内容将展示给不兼容canvas的浏览器</p>
  </canvas>
</body>
<script type="text/javascript">	

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

var x = 40;
var r = 40;
var baseSpead = 2;
var spead = baseSpead;
var draw = function(){
  ctx.clearRect(0,0,400,400);
  ctx.beginPath(); 
  ctx.arc(x,200,r,0,Math.PI*2,true);
  ctx.lineWidth = 4;
  ctx.strokeStyle = "rgba(37,99,237,1)";
  ctx.stroke(); 

  ctx.fillStyle = "rgba(37,237,80,0.5)";
  ctx.fill(); 

  x += spead;
  if(x <= r){
    spead = baseSpead;
  }else if(x >= 400 - r){
    spead = -baseSpead;
  }
  requestAnimationFrame(draw);
}
draw();

function drawLine(x1,y1,x2,y2,w){
  w = w || 1;
  ctx.beginPath();
  ctx.moveTo(x1,y1);
  ctx.lineTo(x2,y2);
  
  ctx.lineWidth = w;
  ctx.strokeStyle="#000";
  ctx.stroke();
}

var coordinateCanvas=document.getElementById("coordinateCanvas");
var coordinateCtx=coordinateCanvas.getContext("2d");
function coordinateSystem(){//画坐标轴
  coordinateCtx.lineWidth = 1;
  coordinateCtx.strokeStyle = 'rgba(81, 195, 50, 0.1)';
  coordinateCtx.font = "10px Arial";
  coordinateCtx.textAlign = "center";
  coordinateCtx.fillStyle = "rgba(0, 0, 0, 0.5)";
  coordinateCtx.translate(80, 80);
  var ca = 40,len = 100;
  for (var i = -len; i < len; i++) {
    var l = 0;
    if(i === 0){
      l = 0;
      coordinateCtx.lineWidth = 2;
      coordinateCtx.strokeStyle = 'rgba(255, 246, 148, 0.5)';
    }
    coordinateCtx.beginPath();
    coordinateCtx.moveTo(i*ca+l,-ca*len+l);
    coordinateCtx.lineTo(i*ca+l,ca*len+l);
    coordinateCtx.stroke();
    coordinateCtx.beginPath();
    coordinateCtx.moveTo(-ca*len+l,i*ca+l);
    coordinateCtx.lineTo(ca*len+l,i*ca+l);
    coordinateCtx.stroke();
    if(i === 0){
      coordinateCtx.lineWidth = 1;
      coordinateCtx.strokeStyle = 'rgba(81, 195, 50, 0.2)';
    }
  };
  for (var i = -len; i < len; i++) {
    coordinateCtx.fillText(i*ca,i*ca,+18);
    if(i !== 0){
      coordinateCtx.fillText(i*ca,15,i*ca + 5);
    }
  }
}
coordinateSystem();//画坐标轴

</script>
</html>
